<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				list-style: none;
			}
			#tabs{ 
				 width: 100%;
				 display:
				 flex; 
			 }
			#tabs li{
				  width: 25%;
				  text-align: center;
				  height: 40px;
				  line-height: 40px;
				  background: rgba(111,130,23,.9);
				  color:#fff;  font-size: 1.8em;
				  border-right: 2px dashed #fff; 
				}
			#tabs li:last-child{ 
				border-right: 0; 
			}
			#tabs li:hover{
				cursor: pointer;
				background: rgba(0,134,111,.9); 
			}
			#tabs li.active{ 
				background: rgba(122,111,123,.9);
				color:rgba(240,230,223,1);  
			}
			#list div{  
				width: 100%;  
				height: 400px;  
				padding: 20px;  
				background: #f4f4f4;  
				display: none;  
			}
			#list div:nth-child(1){ 
				display: block;  
			}
		</style>
	</head>
	<body>
		<ul id='tabs'>
			<li class='active'>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
		<div id='list'>
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	function Toggle(obj){
		var oUl = document.getElementById(obj.tab);
		var oDiv = document.getElementById(obj.list);
		this.oLi = oUl.getElementsByTagName('li');
		this.oDiv = oDiv.getElementsByTagName('div');
		var _this = this;
		var i=0;
		for(var i=0;i<this.oLi.length;i++){
			this.oLi[i].index = i;
			this.oLi[i].onclick = function(){
				_this.show(this.index);
			}
		}
	}
	Toggle.prototype.show = function(Index){
		for(var i=0;i<this.oLi.length;i++){
			this.oLi[i].removeAttribute('class','active');
			this.oDiv[i].style.display = 'none';
		}
		this.oLi[Index].setAttribute('class','active');
		this.oDiv[Index].style.display = 'block';
	}
	
	var toggle = new Toggle({tab:"tabs", list:"list"})
</script>